<template>
	<view class="goshop-address-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-address-empty" v-if="isEmpty === true && addressDataList.length === 0">
			<u-empty :text="emptyText" mode="address"></u-empty>
		</view>
		<view v-else>
			  <u-swipe-action style="width: 100%;">
				  <u-radio-group
					v-model="selectAddressId"
					placement="column"
				  >
					<view class="goshop-address-wrap" v-for="(item,index) in addressDataList">
						   <u-swipe-action-item
						          :options="actionList"
								  style="width: 100%;"
								  @click="onDelete(item.id)"
						        >
								<view class="goshop-address-item">
									<view class="goshop-address-left">
										<view class="goshop-address-left-head">
											<view class="goshop-address-left-name">{{item.consignee}}</view>
											<view class="goshop-address-left-mobile">{{item.mobile}}</view>
											<view class="goshop-address-left-def" v-if="item.defaultStatus === 1">
												{{defaultText}}
											</view>
										</view>
										<view class="goshop-address-left-bottom">
											<view class="goshop-address-left-bottom-top">
												<view v-if="locale ==='zh-Hans'">{{item.province}}</view>
												<view v-if="locale ==='zh-Hans'">-{{item.city}}</view>
												<view v-if="locale ==='zh-Hans'">-{{item.area}}</view>
												<view class="u-m-l-10">{{item.address}}</view>
											</view>
										</view>
									</view>
									<view class="goshop-address-right">
										<view class="iconfont iconfont-edit icon-img-24" v-if="mode === 'edit'"></view>
										<u-radio
										   v-else
										  :customStyle="{marginBottom: '8px'}"
										  :key="index"
										  :name="item.id"
										  @change="selectAddressChange"
										>
										</u-radio>
									</view>
								</view>
							</u-swipe-action-item>
					</view>
				</u-radio-group>

			  </u-swipe-action>
		</view>
		<view class="goshop-address-footer">
			<u-button type="error" icon="plus-circle" @click="goEditPage()" style="width: 260rpx;margin-top: 20rpx;" :text="addText"></u-button>
		</view>
	</view>
</template>

<script>
	import {addressPage,deleteAddress} from '@/common/http.api.js'
	import {isEmpty,isNotEmpty} from '@/utils/utils';
	export default {
		data() {
			return {
				mode:'edit',
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				addressDataList: [],
				loadStatus: 'loadmore',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				params: {
					pageNo: 1,
					pageSize: 10,
				},
				selectAddressId:'',
				actionList:[{
                    text: '',
					style: {
					    backgroundColor: '#f56c6c'
					}
                }],
				emptyText:'',
				defaultText:'',
				hintText:'',
				deleteText:'',
				notdeleteText:'',
				deletesuccessText:'',
				addText:'',
				deletetipText:'',
				locale:'',
			};
		},
		watch:{
			selectAddressId: function (newData, oldData) {
				//newData是更新后的数据
				//oldData是旧数据
				console.log(newData, oldData)
			}
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			   this.getAddressPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.addressDataList = []
			this.getAddressPage()
		},
		onLoad(e){
			debugger
			if(isNotEmpty(e.mode) && isNotEmpty(e.selectAddressId)){
				this.mode = e.mode;
				this.selectAddressId = parseInt(e.selectAddressId);
			}
			this.getAddressPage()	
		},
		onShow(){
			this.refresh();
			this.locale = this.$i18n.locale;
		},
		methods:{
			onDelete(id){
				let that = this;
				uni.showModal({
					title:that.hintText,
					content:that.deletetipText,
					showCancel:true,
					cancelText:that.notdeleteText,
					confirmText:that.deleteText,
					success:res=>{
						if(res.confirm){
							debugger
							deleteAddress({params:{id:id}}).then(res => {
									if (res.code === 0) {
										that.$refs.uToast.show({
											message: that.deletesuccessText,
											type: 'success',
											complete() {
												that.refresh();
											}
										})
									} else {
										that.$refs.uToast.show({
											message: res.msg,
											type: 'error',
										})
									}
								});							
						}
					}
				})
			},
			goEditPage(){
				uni.navigateTo({
					url: '/pages/common/address/edit'
				});
			},
			selectAddressChange(addressId) {
				debugger
				uni.$emit('refreshAddress', addressId)
				uni.navigateBack({
					delta: 1
				})
			},
			refresh(){
				//加载更多标志
				this.loadMoreFlag=false;
				this.isEmpty=false;
				this.addressDataList= [];
				this.loadStatus= 'loadmore';
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				this.params= {
					pageNo: 1,
					pageSize: 10,
				};
				this.emptyText = this.$t('address.empty.text');
				this.defaultText = this.$t('address.default.text');
				this.hintText = this.$t('common.hint.text');
				this.deleteText = this.$t('common.delete.text');
				this.actionList[0].text = this.$t('common.delete.text');
				this.notdeleteText = this.$t('common.notdelete.text');
				this.deletesuccessText = this.$t('common.deletesuccess.text');
				this.addText = this.$t('address.add.text');
				this.deletetipText = this.$t('address.deletetip.text');
				this.getAddressPage();
			},
			getAddressPage(){
				this.loadStatus = 'loading';
				addressPage(this.params).then((res)=>{
					debugger
					uni.stopPullDownRefresh()
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  if (this.params.pageNo > 1) {
						this.addressDataList = this.addressDataList.concat(res.data.list);
					  } else {
						this.addressDataList = res.data.list;
					  }
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
		}
	}
</script>

<style lang="scss">
uni-page-body,page{
	height: 100%;
	width: 100%;
}

.goshop-address-container{
	height: 100%;
	.goshop-address-empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
		height: 100%;
		background-color: $goshop-color-auxiliary-one;
	}
	.goshop-address-wrap{
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;
		display: flex;
		margin-bottom: 10rpx;
		justify-content: space-between;
		.goshop-address-item{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.goshop-address-left{
				.goshop-address-left-head{
					display: flex;
					align-items: center;
					.goshop-address-left-name{
						font-size: 30rpx;
						font-weight: bold;
					}
					.goshop-address-left-mobile{
						margin-left: 20rpx;
						color: $goshop-text-color-three;
					}
					.goshop-address-left-def{
						margin-left: 20rpx;
						padding: 5rpx 20rpx;
						color: $goshop-color-auxiliary-one;
						background-color: $goshop-color-auxiliary-two;
						border-radius: 25px;
					}
				}
				.goshop-address-left-bottom{
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					color: $goshop-text-color-three;
					.goshop-address-left-bottom-top{
						display: flex;
					}
				}
			}
			.goshop-address-right{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.goshop-address-footer{
		padding: 20rpx 0;
	}
}
</style>
